<template>
  <div class="demandBody">
    <section class="aliyun-topbar" style="padding: 25px 0px;">
      <section class="aliyun-topbar-header">
        <section class="aliyun-topbar-element aliyun-logo">
          <!-- <a href class="aliyun-logo-link">
            <span class="topbar-logo-size-cn topbar-logo-new-cn"></span>
          </a>-->
          <router-link to="/">
            <img src="@/assets/logo.png" alt />
          </router-link>
        </section>
      </section>
    </section>

    <!-- 以上header -->
    <div class="content">
      <div class="title">Requirement Release</div>
      <div class="echartsBox">
        <numEcharts></numEcharts>
      </div>
      <div @click="Add" class="btn" style="margin:30px;">Add</div>
      <div class="statistics">
        <a-table
          :selectedRowKeys="[]"
          :data-source="releaseList"
          :customRow="rowClick"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <a-table-column key="ReqName" title="ReqName" data-index="ReqName" />
          <a-table-column key="Content" title="Content" data-index="Content" />

          <a-table-column key="Person" title="Person" data-index="Person" />

          <a-table-column key="Time" title="Time" data-index="Time" />

          <a-table-column key="Department" title="Department" data-index="Department" />
          <a-table-column key="Level" title="Level" data-index="Level" />

          <a-table-column key="Status" title="Status" data-index="Status" />
          <a-table-column key="Actions" title="Actions">
            <template slot-scope="text,record">
              <div class="flex btnbox">
                <div @click="Delete(text,record)" class="btn">Delete</div>
                <div @click="Edit(text,record)" class="btn">Edit</div>
              </div>
            </template>
          </a-table-column>
        </a-table>
      </div>
    </div>

    <!-- 弹窗部分 -->
    <!-- 咨询回复框 -->
    <a-modal v-model="showAddModal" :footer="null" @cancle="closeAddModal">
      <div class="consultingBox" ref="consult">
        <!-- <div class="title"></div> -->
        <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
          <a-form-item label="ReqName">
            <a-input v-model="ReqName" />
          </a-form-item>
          <a-form-item label="Content">
            <a-input v-model="Content" />
          </a-form-item>
          <a-form-item label="Person">
            <a-input v-model="Person" />
          </a-form-item>
          <a-form-item label="Time">
            <a-date-picker v-model="Time" show-time format="YYYY-MM-DD HH:mm:ss" placeholder />
          </a-form-item>
          <a-form-item label="Department">
            <a-input v-model="DepartmentName" />
          </a-form-item>
          <a-form-item label="Level">
            <a-select :v-model="Level">
              <a-select-option :value="1">Level1</a-select-option>
              <a-select-option :value="2">Level2</a-select-option>
              <a-select-option :value="3">Level3</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="Status">
            <a-select :v-model="Status">
              <a-select-option :value="0">已发布</a-select-option>
              <a-select-option :value="1">已接收</a-select-option>
              <a-select-option :value="2">已完成</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
        <div class="flex btnBox">
          <div class="btn" @click="closeAddModal">cancle</div>

          <div class="btn" @click="submitUpdate">submit</div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import Header from '@/components/layout/header'
import numEcharts from '../solution/demandEcharts'
export default {
  name: 'Demand',
  data() {
    return {
      releaseList: [],
      showAddModal: false,
      Time: null,
      DepartmentName: null,
      Person: null,
      ReqName: null,
      Level: null,
      Content: null,
      Status: null,
      current: 0,
      pageSize: 8,
      pagination: {},
    }
  },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    Header,
    numEcharts,
  },
  created() {},
  mounted() {
    this.initData()
    // this.pagination.current = 0
    this.pagination.pageSize = 8
  },
  methods: {
    initData() {
      let obj = {
        ReqName: 'electric',
        Content:
          'Expertise in head-up displays, user interfaces, and gesture control that keep information right in front of the driver and their eyes on the road. ',
        Time: '2010-10-09 20:08:50',
        Department: 'PD',
        Level: 1,
        Status: 0, //0 已发布 1 已接收 2已完成
      }

      for (let index = 0; index < 15; index++) {
        this.releaseList.push(obj)
      }
      // console.log('this.releaseList :>> ', this.releaseList)
    },
    rowClick(item) {
      // console.log('item :>> ', item)
    },
    Add() {
      this.showAddModal = true
    },
    Edit(text, record) {
      this.showAddModal = true
    },
    Delete(text, record) {},
    closeAddModal() {
      this.showAddModal = false
    },
    submitUpdate() {
      this.showAddModal = false
    },
    handleSubmit(e) {
      console.log('e :>> ', e)
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination)
      const pager = { ...this.pagination }
      pager.current = pagination.current
      pager.pageSize = pagination.pageSize
      this.pagination = pager
    },
  },
}
</script>

<style lang="less" scoped>
.demandBody {
  background: white;
  padding: 0 10%;
}
.title {
  text-align: left;
  font-size: 38px;
  color: #181818;
  letter-spacing: 0;
  display: inline-block;
  padding: 0 10px;
  vertical-align: bottom;
  height: 35px;
  line-height: 35px;
  padding: 50px 0;
  margin-bottom: 80px;
}

.flex {
  display: flex;
}

.statistics {
  margin: 50px 0;
}

.btn {
  float: right;
  background-color: #ff6a00;
  height: 36px;
  line-height: 36px;
  padding: 0 35px;
  font-size: 14px;
  color: #fff;
  box-sizing: border-box;
  margin-right: 20px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.btnbox {
  // margin: 50px 0 100px 250px;
}

// list编辑新增弹框
.consultingBox {
  padding: 20px 0;

  /deep/ .ant-input {
    height: 70% !important;
    font-size: 20px;
  }

  .btnBox {
    margin-left: 60px;
    margin-top: 30px !important;
  }

  .btn {
  }

  .title {
    margin-top: 0;
    padding: 10px;
  }
}
</style>